$(function(){
	

	/*划过小图片让相应的图片显示*/
	$("#bottom li").mouseover(function(){
		var index=$(this).index();
		$("#small img").eq(index).show().siblings().hide();
		$("#big img").eq(index).show().siblings().hide()
	})
	/*划过图片让相应的大图片显示*/
	$("#small").mouseover(function(){
		//alert()
		$("#mask").show();
		$("#big").show();
	})
	/*离开图片让相应的图片消失*/
	$("#small").mouseout(function(){
		$("#mask").hide();
		$("#big").hide();
	})
	/*划过图片让相应的大图片按比例显示*/
	$("#small").mousemove(function(e){
		var e=e  || evnet;
		//console.log(this)
		var x=e.pageX-$("#small").offset().left-$("#mask").width()/2;
		var y=e.pageY-$("#small").offset().top-$("#mask").height()/2;
		var mx = $("#small").width()  - $("#mask").width();
		var my = $("#small").height()  - $("#mask").height();
		
		//边界处理
		x = x<=0 ? 0 : x>=mx ? mx : x;
		y = y<=0 ? 0 : y>=my ? my : y;
		
		//大图宽度/小图宽度 = 大图偏移 / mask的偏移
		
		var bigImageX = -x * $(".bigImage").width() / $("#small").width();
		var bigImageY = -y * $(".bigImage").height() / $("#small").height();
		$("#mask").css({
			"left":x + "px",
			"top":y+"px"
		})
		
		$(".bigImage").css({
			"left" : bigImageX+"px",
			"top" : bigImageY+"px"
		})
	})
	
 	 	//动态创建标签 添加地址  三级联动
 	 	$.ajax({
		    type: "GET",
		    url: "../js/dizhi.json",//获取本地json文件
		    data: "json",
		    success: function(msg){
				//遍历获取数据*
			    $.each(msg,function(i,n){ 
			     	$("#prov").append( `<option>${i}</option>`)
	
			     	m=JSON.stringify(n);//因为是对象直接取不出来就转为字符串
	     	})  
	     	//获取相应数据添加
	     	 	$("#prov").on("change",function(){
	     	 		$("#city")[0].length=1;
	     	 		var index=$(this).val();
					  city=msg[index];
	     	 		$.each(city,function(n){
	     	 			$("#city").append( `<option>${n}</option>`)
	     	 		})
	     	 	
 	 			})
	     	 	
	     	 	$("#city").on("change",function(){
	     	 		$("#county")[0].length=1;
	     	 		var index=$(this).val();
	     	 		var cou=city[index];
	     	 		$.each(cou,function(i){
	     	 			$("#county").append( `<option>${cou[i]}</option>`)
	     	 		})
	     	 	
 	 			})
	     	 	
			}
		})
 	 	
 	 
 	 	
			$.ajax({
				 type: "GET",
			    url: "../dist/script/liebiao.json",//获取本地json文件
			    data: "json"
			})
			.then(function(res){//传入数据
				
				var html=""
				if($.cookie("goods")){//用cookie数据和json数据对比找出该加载的id
					var acookie=JSON.parse( $.cookie("goods"));
					for(var i=0;i<acookie.length;i++){
						for(var j=0;j<res.length;j++){
							if(res[j].id==acookie[i].id){//找出id根据id加载
								html += `
										<li>
											
											<img  src="${res[j].img}"> 
											<span>商品数量:${acookie[i].num}</span>
											<div class="re" data-id=${res[j].id}>删除</div>
										</li>
										
									`					
							}
							
						}
						
					}
					$(".good-list").html(html)	
					
				}else{
					console.log("没有cookie")
				}
				
			},function(){
				console.log("加载失败")
			})
			
		
			
})	